<template>
  <el-dialog v-model="showDialog" title="绘制文字设置" width="350" draggable :modal="false" overflow
    :close-on-click-modal="false" :append-to-body="true" :id="props.dioid"
    :style="{ top: '15%', left: '6%', margin: '0' }" :align-center="false" @close="onCancel">
    <el-form :model="props.labelfrom" label-width="80px">
      <el-form-item label="类型:">
        <el-input v-model="props.labelfrom.Leixing"> </el-input>
      </el-form-item>

      <el-form-item label="名称">
        <el-input v-model="props.labelfrom.LayerName" />
      </el-form-item>
      <el-form-item label="文字显示:">
        <el-input v-model="props.labelfrom.Title" @change="changefrom" />
      </el-form-item>


      <!-- <el-form-item label="字体名称:">
        <el-input v-model="props.labelfrom.FontStyle.FontName" />
      </el-form-item> -->
      <el-form-item label="字号:">
        <el-input v-model="props.labelfrom.FontStyle.FontSize" @change="changefrom" />
      </el-form-item>
      <!-- <el-form-item label="是否加粗:">
        <el-select v-model="props.labelfrom.FontStyle.IsBold">
          <el-option label="加粗" value="1"></el-option>
          <el-option label="不加粗" value="0"></el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item label="前景色:">
        <el-color-picker @active-change="changezicolor" @blur='changefrom'
          v-model="props.labelfrom.FontStyle.ForeColordata" show-alpha />
      </el-form-item>
      <el-form-item label="背景色:">
        <el-color-picker @active-change="changebgcolor" @blur='changefrom'
          v-model="props.labelfrom.FontStyle.BackColordata" show-alpha />
      </el-form-item>


      <el-form-item label="点坐标X">
        <el-input @change="changefrom" type="number" v-model="props.labelfrom.StartX" />
      </el-form-item>
      <el-form-item label="点坐标Y">
        <el-input @change="changefrom" type="number" v-model="props.labelfrom.StartY" />
      </el-form-item>

    

    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="onCancel">取消</el-button>
        <el-button type="primary" @click="submitForm">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch, getCurrentInstance } from "vue";
import { postAddpoint, putpoint } from "@/api/index.js";
import { armyMarkobj, getArmyMarkValue, ColorStyle } from '@/utils/compnt.js'
const { proxy } = getCurrentInstance();
const props = defineProps({
  showDrawDialog: {
    type: Boolean,
    default: false,
  },
  dioid: {
    type: String,
    default: "",
  },
  initialPosition: {
    type: Object,
    default: () => ({ lon: null, lat: null, alt: null }),
  },
  labelfrom: {
    type: Object,
    default: () => ({})
  },
  isapi: {
    type: Boolean,
    default: false
  }
});

const emits = defineEmits(['labelfromcol', 'close'])

const submitForm = async () => {

  props.labelfrom.StartP.Lon = Number(props.labelfrom.StartP.Lon)
  props.labelfrom.StartP.Lat = Number(props.labelfrom.StartP.Lat)
  props.labelfrom.StartP.Alt = Number(props.labelfrom.StartP.Alt)

  console.log(props.labelfrom);

  try {
    if (props.isapi) {
      const response = await putpoint(props.labelfrom);
      console.log("请求成功:", response);
    } else {

      const response = await postAddpoint(props.labelfrom);
      console.log("请求成功:", response);
    }
    proxy.$mitt.emit("getsubmit")
    onCancel()
    // 可以在这里处理响应数据
  } catch (error) {
    console.error("请求失败:", error);
    // 可以在这里处理错误信息
  }
};

const onCancel = () => {
  const event = new CustomEvent("draw-point-cancel");
  window.dispatchEvent(event);
};

const onDialogClose = () => {
  const event = new CustomEvent("draw-point-close");
  window.dispatchEvent(event);
};

const showDialog = ref(props.showDrawDialog);

// 监听 props 变化以同步本地状态
watch(
  () => props.showDrawDialog,
  (newValue) => {
    showDialog.value = newValue;
  }
);


//
const changezicolor = (color) => {
  props.labelfrom.FontStyle.ForeColordata = color
  props.labelfrom.FontStyle.ForeColor = ColorStyle(color, 1)
}


const changebgcolor = (color) => {
  props.labelfrom.FontStyle.BackColordata = color
  props.labelfrom.FontStyle.BackColor = ColorStyle(color, 1)
}


const changefrom = (data) => {

  emits('labelfromcol', props.labelfrom)
}





const changejbtype = (type) => {
  props.labelfrom.Icon.LibID = getArmyMarkValue(type).LibID
  props.labelfrom.Icon.Code = getArmyMarkValue(type).Code
}


</script>

<style>
.el-color-dropdown__btns button {
  display: none;
}
</style>